<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app17">
    <!--Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处-->
    <!--<template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address">
    </template>
    <button v-on:click="changeType()">change</button>-->
    
    <!--如果你不要复用它们,只需要在输入框上添加key属性就可以了-->
    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="username">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="email">
    </template>
    <button v-on:click="changeType()">change</button>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app17',
        data: {
            loginType: 'username',
        },
        methods: {
            changeType() {
                if (this.loginType === 'username') {
                    this.loginType = 'email'
                } else {
                    this.loginType = 'username'
                }
            }
        }
    })
</script>
</body>
</html>